import { computed, defineAsyncComponent, ref } from 'vue'

export const useComponent = () => {

    const selectCur = ref('drawingBoard')
    const options = [
        {
            value: 'drawingBoard',
            label: '画板',
            component: defineAsyncComponent(() =>
                import('./components/DrawingBoard.vue')
            )
        },
        {
            value: 'barChart',
            label: '滤镜',
            component: defineAsyncComponent(() =>
                import('./components/Filter.vue')
            )
        },
        {
            value: 'magnifier',
            label: '放大镜',
            component: defineAsyncComponent(() =>
                import('./components/Magnifier.vue')
            )
        },
        {
            value: 'timeClock',
            label: '时钟',
            component: defineAsyncComponent(() =>
                import('./components/TimeClock.vue')
            )
        }]
    const option = computed(() => options.find(item => item.value === selectCur.value))

    return { selectCur, option, options }
}
